'use client'
import PageTitleContent from "@/app/components/pageTitleContent";
import { Tab, Table, TableBody, TableHeader, Tabs,TableRow,TableCell, TableColumn,getKeyValue, Button } from "@nextui-org/react";

export default function RankPage(){
    const inviteHeader = [{
        label: "排名等级",
        key: 'level'
    },{
        label: "昵称",
        key: 'username'
    },{
        label: "本月邀请人数",
        key: 'month_invite_num'
    },{
        label: "累计邀请人数",
        key: 'total_invite_num'
    },{
        label: "邀请奖励/次数",
        key: 'invite_reward'
    },{ // 操作按钮
        label: "达人奖励",
        key: 'talent_reward'
    }]
    const mockData = [
        {
            key: "1",
            level: 1,
            username: "张三",
            month_invite_num: 10,
            total_invite_num: 20,
            invite_reward: 100,
            talent_reward: 100
        },
        {
            key: "2",
            level: 2,
            username: "李四",
            month_invite_num: 10,
            total_invite_num: 20,
            invite_reward: 100,
            talent_reward: 100
        },
        {
            key: "3",
            level: 3,
            username: "王五",
            month_invite_num: 10,
            total_invite_num: 20,
            invite_reward: 100,
            talent_reward: 100
        }
    ]
    return (
        <div className="rank_page_container mx-[68px]">
            <Tabs aria-label="Ranks">
                <Tab key={"invite"} title={"邀请排行榜"}>
                    <Table aria-label="RankTable">
                        <TableHeader columns={inviteHeader}>
                            {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
                        </TableHeader>
                        <TableBody items={mockData}>
                            {(item) => (
                                <TableRow key={item.key}>
                                    {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </Tab>
                <Tab key={"trade"} title={"交易排行榜"}>
                    <Table aria-label="TradeTable">
                        <TableHeader columns={inviteHeader}>
                            {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
                        </TableHeader>
                        <TableBody items={mockData}>
                           {(item) => (
                                <TableRow key={item.key}>
                                    {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </Tab>
                <Tab key={"create"} title={"创作排行榜"}>
                    <Table aria-label="CreateTable">
                        <TableHeader columns={inviteHeader}>
                            {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
                        </TableHeader>
                        <TableBody items={mockData}>
                            {(item) => (
                                <TableRow key={item.key}>
                                    {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </Tab>
            </Tabs>
            <PageTitleContent title={"邀请规则"} className="mt-[60px]">
                <div className="invite_rule_content">
                    <div className="invite_rule text-[14px] font-normal leading-7 mt-[10px] mb-[27px]">
                        <p>
                            1. 活动时间： 2023年11月20日  - 2023 年12 月20 日
                        </p>
                        <p>
                            2. 新用户注册即获得iThinkChat的 5 次 对话次数
                        </p>
                        <p>
                            3. 每邀请 1位 好友注册，可奖励 5 次；
                        </p>
                        <p>
                            4. 邀请人数达 10人，且排行榜前3名，奖励 白银会员 、 钻金会员、青钻会员；
                        </p>
                        <p>
                            5. 通过自媒体平台发布iThinkAi 产品种草内容，成功发布奖励 10次 （每月仅1次）；单篇点赞数达50次、评论数30条， 奖励白银会员 、 钻金会员、青钻会员。
                        </p>
                        <p>
                            6. 成为iThinkAi网站推广大使（代理），用户付费，返还佣金20%。进一步了解详情，联系微信：ai979290
                        </p>
                    </div>
                    <div className="invite_button flex justify-center mb-[217px]">
                        <Button color="primary" radius="full"  className="button px-[56px] py-[16px] text-[14px] leading-none h-auto">立刻邀请</Button>
                    </div>
                </div>
            </PageTitleContent>
        </div>
    )
}